<template>
	<view class="container">
		<swiper class="swiper-box">
			<swiper-item v-for="(item, index) in info" :key="index">
				<image :src="item.url" mode="scaleToFill" style="width: 100%; height: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="main">
			<view class="card">
				<view class="header">
					<image class="avatar" :src="userInfo.avatarUrl"></image>
					<view class="name">新手</view>
				</view>
				<view class="center">
					<view class="card-view" @click="clickCardManage">开卡</view>
					<view class="card-view" @click="clickCard">我的卡</view>
				</view>
			</view>
			<view class="ab">
				<image class="image" :src="userInfo.avatarUrl"></image>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog" :is-mask-click="false">
			<view class="popup-content">
				<view>
					您还未关联手机号，请先关联手机号
				</view>
				<view>
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">关联手机号</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	import * as authApi from "@/api/auth.js"
	export default {
		data() {
			return {

				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				]
			}
		},
		computed: {
			...mapGetters(['isLogin']),
			...mapState(['userInfo']),
		},
		onLoad: function(option) {
			this.start()
		},
		onShow: function() {

		},
		methods: {
			...mapMutations(["login"]),
			start() {
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res)

						authApi.login({
							code: res.code
						}).then(res => {
							//登录存储数据
							this.login(res.data)
						}).catch(err => {
							console.log("login错误数据", err)
						})
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			getPhoneNumber(e) {
				console.log('手机号', e)
				// 关闭
				// this.$refs.popup.close()
			},
			clickCardManage() {
				uni.navigateTo({
					url: '../manage/index/index'
				})
			},
			clickCard() {
				uni.navigateTo({
					url: '../card/list/list'
				})
			}
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.container {
		padding: 0;
		margin: 0;
		font-size: 14px;
		line-height: 24px;
	}

	.swiper-box {
		height: 500rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 500rpx;
		color: #fff;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.swiper-box {
			width: 800rpx;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.main {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.card {
		position: relative;
		top: -40rpx;
		box-shadow: 0px 0px 4px 0px gray;
		border-radius: 10rpx;
		padding: 26rpx;
		background-color: #fff;
		margin: 0;

		.header {
			@include flex();
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 26rpx;

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.name {
				padding-left: 10px;
			}
		}

		.center {
			@include flex();
			justify-content: space-between;
			align-items: center;

			.card-view {
				text-align: center;
				width: 308rpx;
				height: 272rpx;
				background-color: #F7F7F7;
			}
		}

	}

	.ab {
		margin-top: -20rpx;
		padding: 0;

		.image {
			border-radius: 10rpx;
			width: 100%;
			height: 252rpx;

		}
	}

	.popup-content {
		@include flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 882rpx;
		width: 664rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}
</style>
